<template>
  <transition name="toast">
    <div v-show="_show" class="toast">{{ _message }}</div>
  </transition>
</template>

<script lang="ts">
import { ref, unref, defineComponent } from "vue";
export default defineComponent({
  name: 'MessageBox',
  setup () {
    const _show = ref(false)
    const _message = ref('hello')

    const open = (message: string, delay = 1000) => {
      if (_show.value) return
      _message.value = message
      _show.value = true
      setTimeout(close, unref(delay))
    }

    const close = () => {
      _show.value = false
    }
    return {
      _show,
      _message,
      open
    }
  }
})

</script>

<style scoped>
.toast {
  position: fixed;
  z-index: 10000;
  bottom: 50%;
  left: 50%;
  padding: 6px 20px;
  transform: translateX(-50%);
  color: #fff;
  background-color: rgba(37, 38, 45, .9);
  border-radius: 6px;
  user-select: none;
}

.toast-enter-active {
  animation: fade .2s;
}

.toast-leave-active {
  animation: fade .2s reverse;
}

@keyframes fade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>